/**
 * 组件生命周期：
 * 1. 挂载
 * 2. 更新: * setState() * forceUpdate() * 子组件：接收到新的props
 * 3. 卸载
 */

import React, { Component } from 'react';


// 子组件
class Child extends Component {

  componentDidUpdate(prevProps, prevState) {
    console.log('子组件：2. componentDidUpdate()')
  }

  // 组件销毁=》钩子函数
  /**
   * 作用：
   * 1. 清除定时器
   * 2. 解绑事件
   */
  componentWillUnmount() {
    console.log('组件销毁了')
  }


  render() {
    console.log('子组件：1. render()')
    return (
      <div>
        <h2>子组件</h2>
        <p>{this.props.count}</p>
      </div>
    );
  }
}



// 父组件
class App extends Component {
  constructor() {
    super();
    // 只执行1次
    this.state = {
      count: 0,
      // 是否显示Child组件
      isShow: true
    }
    console.log('1.constructor()')
  }

  // 点击加一
  add = () => {
    this.setState({
      count: this.state.count + 1,
      isShow: !this.state.isShow
    })
  }

  // 强制更新
  addForce = () => {
    this.forceUpdate()
  }

  /**
   * 作用：
   * 1. 操作DOM
   * 2. 发送请求
   * @param {*} prevProps 上一次：props
   * @param {*} prevState 上一次: state
   */
  componentDidUpdate(prevProps, prevState) {
    console.log('4.componentDidUpdate()', prevProps, prevState)
  }


  // 加载时=》钩子函数 
  // vue：mounted
  /**
   * 作用：
   * 1. 操作DOM
   * 2. 发送请求
   */
  componentDidMount() {
    console.log('3.componentDidMount()')
  }

  render() {
    // 多次执行
    console.log('2.render()');
    // 死循环
    // this.setState({
    //   count: 1
    // })
    return (
      <div>
        <h1>组件生命周期</h1>
        <hr />
        <p>{this.state.count}</p>
        <button onClick={this.add}>更新count</button>
        <button onClick={this.addForce}>暴力更新</button>
        <hr />
        {
          this.state.isShow ? <Child count={this.state.count} /> : null
        }
      </div>
    );
  }
}

export default App;